import alertFill from "@/assets/image/icons/alert-fill.svg";
import upload from "@/assets/image/patterns/Upload.png";
import CustomModal from "@/components/customModal";
import { ProFormUploadDragger } from "@ant-design/pro-components";
import { Card, Collapse, Switch } from "antd";
import React, { useState } from "react";
import UploadCard from "./componnets/upload-card/UploadCard";
import { CloseOutlined } from "@ant-design/icons";
import FileUpload from "@/assets/image/patterns/File Upload.png";
import { StyleViewDocument, UploadTitle } from "@/components/common-styled";
import { Flex, Modal } from "antd/es";
import styled from "styled-components";
import AirPort from "@/assets/image/AirportStaff.png";
import { CheckCircleOutlined } from "@ant-design/icons";

const { Panel } = Collapse;
interface ContentProps {
  ContentItem?: string;
  name?: string;
  required?: boolean;
  cardTitle?: string;
  formText?: any;
}
interface Props {
  name?: string;
  leftText?: string;
  icon?: string;
  content?: ContentProps[];
  clickout?: () => void;
}

const StyledQualified = styled("div")`
  //styleName: 04 Subtitle Small EN/Regular;
  font-family: Roboto;
  font-size: 22px;
  font-weight: 400;
  line-height: 32px;
  text-align: center;
  color: #202020;
`;

const StyledMT = styled("div")`
  margin-top: 16px;
`;

const StyledTCenter = styled(StyledMT)`
  text-align: center;
`;

const contents = [
  {
    ContentItem: "11",
    name: "22222",
    required: false,
    cardTitle: "License Plate Number Information",
    formText: [
      {
        name: "test",
        value: "test",
      },
      {
        name: "test1",
        value: "test1",
      },
      {
        name: "test12",
        value: "test12",
      },
      {
        name: "test122",
        value: "test12333",
      },
    ],
  },
  {
    ContentItem: "1122222222",
    name: "2222222222",
    required: false,
  },
];

const NewUploadItem: React.FC<Props> = ({
  name = "2",
  leftText,
  icon,
  content = contents,
  clickout,
}) => {
  console.log(content, "content");
  const [collapsed, setCollapsed] = useState(true);
  const [isModalOpenUnregister, setIsModalOpenUnregister] = useState(false);
  const [isModalOpenUnregister1, setIsModalOpenUnregister1] = useState(false);
  const [uploadStates, setUploadStates] = useState(
    Array(content?.length).fill(false)
  );
  // Unregister Modal
  const handleOkUnregister = () => {
    setCollapsed(false);
    setIsModalOpenUnregister(false);
  };

  const handleCancelUnregister = () => {
    clickout?.();
    setUploadStates([]);
    setIsModalOpenUnregister(false);
  };
  const handleCancelUnregister1 = () => {
    setIsModalOpenUnregister1(false);
  };

  const handleSwitchChange = (checked: boolean) => {
    setCollapsed(!checked);
    if (collapsed) {
      setIsModalOpenUnregister(false);
    } else {
      setIsModalOpenUnregister(true);
    }
  };

  const handleUploadSuccess = (index: number) => {
    //处理成功数据
    const newStates = [...uploadStates];
    newStates[index] = true;
    setUploadStates(newStates);
  };
  // const handleUploadError = () => {
  //   setIsUploaded(false);
  //   setUploadedFile(null);
  // };
  const handleClick = (event: any) => {
    console.log(event, "handleClick");
    setIsModalOpenUnregister1(true);
    event.stopPropagation(); // 防止事件冒泡到父级元素
  };

  return (
    <>
      <Collapse
        style={{ margin: "20px 0" }}
        className="collapseUpload"
        activeKey={collapsed ? [] : ["1"]}
      >
        <Panel
          header={
            <div style={{ display: "flex", alignItems: "center" }}>
              {icon && <img src={icon} alt="My SVG Icon" />}
              <span style={{ marginLeft: "12px" }}>{leftText}</span>
              <Switch
                checked={!collapsed}
                onChange={handleSwitchChange}
                style={{ marginLeft: "auto" }}
              />
            </div>
          }
          key="1"
          showArrow={false}
        >
          {content?.map((item, index) => {
            const isItemUploaded = uploadStates[index];

            const handleRemoveAndUpdateUploadCard = (remove: any) => {
              remove.remove();
              const newUploadStates = [...uploadStates];
              newUploadStates[index] = false;
              setUploadStates(newUploadStates);
            };
            return (
              <div key={index}>
                <UploadTitle
                  style={{
                    margin: index === 0 ? "0 0 12px 0" : "24px 0 12px 0",
                  }}
                >
                  {item?.ContentItem}
                  {item?.ContentItem ===
                    "Please upload Airport Staff Octopus Card (Back Side)" && (
                    <>
                      &emsp;
                      <StyleViewDocument onClick={(e) => handleClick(e)}>
                        View Sample Document
                      </StyleViewDocument>
                    </>
                  )}
                </UploadTitle>
                <ProFormUploadDragger
                  action="/sma-adm/api/common/upload-logo"
                  required={item?.required}
                  className="formUpload"
                  max={1}
                  title={
                    <>
                      Drag or{" "}
                      <span
                        style={{
                          color: "#7A6145",
                          textDecoration: "underline",
                        }}
                      >
                        Browse
                      </span>
                    </>
                  }
                  icon={<img src={upload} alt="upload" />}
                  description={`The file size cannot exceed 5MB.\n
              Acceptable formats for submission: PDF, PNG and JPG.`}
                  fieldProps={{
                    multiple: false,
                    accept: ".jpg, .jpeg, .png,.pdf",
                    onChange: (info) => {
                      if (info.fileList.length > 1) {
                        info.fileList.shift();
                      }
                    },
                    customRequest: ({ file, onSuccess, onError }) => {
                      // @ts-ignore
                      onSuccess({ file });
                      handleUploadSuccess(index);
                      console.log(onError, "onError ");
                    },
                    itemRender: (_, file, __, remove) => (
                      <>
                        <Card
                          className="procard111"
                          style={{
                            marginTop: "10px",
                            display: "flex",
                            alignItems: "center",
                            justifyContent: "space-between",
                            width: "50%",
                          }}
                          hoverable
                          bordered
                          styles={{
                            body: { width: "100%" }, // 使用 styles.body 替代 bodyStyle
                          }}
                        >
                          <div
                            style={{
                              display: "flex",
                              alignItems: "center",
                              width: "100%",
                              height: "50px",
                              padding: "0 10px 0 10px",
                            }}
                          >
                            <img
                              src={FileUpload}
                              alt="FileUpload"
                              style={{
                                width: "24px",
                                height: "24px",
                                marginRight: "8px",
                              }}
                            />
                            <span>{file.name}</span>
                            <CloseOutlined
                              onClick={() =>
                                handleRemoveAndUpdateUploadCard(remove)
                              }
                              style={{ marginLeft: "auto" }}
                            />
                          </div>
                        </Card>
                      </>
                    ),
                  }}
                  label={null}
                  name={[name, item?.name]}
                ></ProFormUploadDragger>
                {isItemUploaded && (
                  <>
                    <UploadCard
                      fileName={name}
                      formText={item?.formText}
                      cardTitle={item?.cardTitle}
                    />
                  </>
                )}
              </div>
            );
          })}
        </Panel>
      </Collapse>

      <CustomModal
        icon={alertFill}
        title="Unregister this License Plate Number?"
        content="Once you unregister this license plate number, the content will be lost and the action cannot be undone."
        onOk={handleOkUnregister}
        onCancel={handleCancelUnregister}
        isModalOpen={isModalOpenUnregister}
        btnLeftText="Unregister"
        btnRightText="Keeping"
        btnRightBgColor="#C02020"
      />

      <Modal
        width={"800px"}
        centered
        title="Sample of Document Upload"
        // content="Please upload the side that includes the Photo, Name, and Octopus No. according to the provided sample specifications."
        onOk={handleOkUnregister}
        onCancel={handleCancelUnregister1}
        open={isModalOpenUnregister1}
        footer={null}
      >
        <Flex vertical justify="center" align="center">
          <StyledQualified>
            {/* border: 1px solid #26A461 */}
            <CheckCircleOutlined style={{ color: "#26A461" }} />
            &nbsp; Qualified Document
          </StyledQualified>
          <StyledTCenter>
            Please upload the side that includes the Photo, Name, and Octopus
            No. according to the provided sample specifications.
          </StyledTCenter>
          <StyledMT>
            <img
              src={AirPort}
              alt=""
              style={{
                width: "400px",
                height: "253px",
              }}
            />
          </StyledMT>
        </Flex>
      </Modal>
    </>
  );
};

export default NewUploadItem;
